<template>
    <div class="detailArea">
        <!-- 轮播区域 -->
        <div class="lunboArea">
          <el-carousel :interval="5000" arrow="always"  height="150px">
            <el-carousel-item v-for="item in detailPic" :key="item.pics_id">
                <img class="lunboPic" :src="item.pics_mid_url" />
            </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 名称，收藏 -->
        <div class="goodsName clearFix">
            <div class="name">
                {{detailData.goods_name}}
                <p>￥ {{detailData.goods_price}}</p>
            </div>
            <div class="collect">
                收藏
            </div>
        </div>
        <!-- 详情介绍 -->
        <div class="detailIntroduction">
            <div v-html="detailData.goods_introduce"></div>
        </div>
        <!-- 底部导航 -->
        <div class="footNav clearFix">
            <div class="footItem">分享</div>
            <div class="footItem" @click="goCart">购物车</div>
            <div class="footItem" @click="addCart">加入购物车</div>
        </div>
    </div>
</template>
<script>
export default {
    name:'detail',
    data(){
        return{
            detailData:[],
            detailPic:[]
        }
    },
    mounted(){
        // console.log(this.$route.query)
        let goods_id=this.$route.query.goods_id
        let promise1=this.axios({
            url:'/goods/detail',
            method:'GET',
            params:{
                goods_id:goods_id
            }
        })
        promise1.then((res)=>{
            // console.log(res)
            this.detailData=res.data.message
            this.detailPic=res.data.message.pics
        })
    },
    methods:{
        addCart(){    
            //   商品id
            let goods_id=this.$route.query.goods_id
            console.log(goods_id)
            // 从本地中获取购物车中商品
            let cart=JSON.parse(sessionStorage.getItem("cart"))||[]
            // console.log(typeof cart)
            // 判断是否含有当前商品信息
            let index=cart.findIndex((v)=>v.goods_id==goods_id)
            // console.log(index)
            // 不存在
            if(index==-1){
                this.detailData.num=1//添加num属性
                this.detailData.checked=true
                cart.push(this.detailData)
            }else{
                // 存在,num++
                console.log(cart[index])
                cart[index].num++
            }
            sessionStorage.setItem("cart",JSON.stringify(cart))
        },
        goCart(){
            this.$router.push('/cart')
        }
    }
}
</script>
<style lang="less" scoped>
// 
.lunboArea{
    width: 100%;
    .lunboPic{
        width: 100%;
    }
}
// 
.goodsName{
    height: 55px;
    width: 100%;
    font-size: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    .name{
        float: left;
        width: 70%;
        p{
            font-size: 14px;
            color: brown;
            text-align: left;
            padding-left: 15px;
            padding-bottom: 10px;
        }
    }
    .collect{
        float: right;
        width: 28%;
        line-height: 55px;
        background-color: cadetblue;
    }
}
.footNav{
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 50px;
    line-height: 50px;
    background-color: antiquewhite;
    display: flex;
    justify-content: space-around;
    .footItem{
        width: 30%;
        // height: 40px;
        // line-height: 50px;
        // float: left;
        // background-color: aqua;
    }
}
</style>